import React, { ReactElement, ReactNode, useEffect, useState } from 'react'
import { Select } from 'antd'
import { getCategories } from '@/api/article'
import { connect } from 'umi'

interface Props {
    children?: ReactNode,
    changeHeroInfo: Function
}

const { Option } = Select;

function Index({ children, changeHeroInfo }: Props): ReactElement {
    const [data, setData] = useState([]) 

    const handleChange = (value: Array<string>) => {
        changeHeroInfo('cate', value)
        console.log(value);
    }
    useEffect(() => {
        getCategories().then(res => {
            setData(res.data[0].children)
        })
    }, [])
    return (
        <div style={{
            width: 240
        }}>
            <Select
                mode="multiple"
                style={{ width: '100%' }}
                placeholder="select one country"
                defaultValue={[]}
                onChange={handleChange}
                optionLabelProp="label"
            >
                {
                    data.map((item: any, index: number) => {
                        return  <Option key = { index } value={ item._id } label={ item.name }>
                        <div className="demo-option-label-item">
                           { item.name }
                        </div>
                    </Option>
                    })
                }
            </Select>
        </div>
    )
}

export default connect(() => {
    return {

    }
}, (dispatch) => {
    return {
        changeHeroInfo(classify: string, value: string) {
            dispatch({ type: "hero/changeHeroInfo", classify, value })
        }
    }
})(Index)
